﻿<!DOCTYPE html>
<html>
<head>
	<title>Azure Maps Sample</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
	<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css">
	<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/indoor/0.1/atlas-indoor.min.css" type="text/css" />
	<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.js"></script>

	<script src="../dist/threebox.js" type="text/javascript"></script>
	<link href="../dist/threebox.css" rel="stylesheet" />
	<script src="config.js"></script>

	<style>
		html,
		body {
			width: 100%;
			height: 100%;
			padding: 0;
			margin: 0;
		}

		#myMap {
			width: 100%;
			height: 100%;
		}
	</style>
</head>
<body>
	<div id="myMap"></div>

	<script type="module">
		import Stats from 'https://threejs.org/examples/jsm/libs/stats.module.js';
		function animate() {
			requestAnimationFrame(animate);
			stats.update();
		}
		let stats = new Stats();
		if (!config) console.error("Config not set! Make a copy of 'config_template.js', add in your access token, and save the file as 'config.js'.");
		/// Seattle Space Needle from here https://3dwarehouse.sketchup.com/model/d4c52391dfaa912d9a1f861ea5945001/Space-Needle?hl=en&login=true
		/// Soldier model from here Skeletal Animation Blending= https://www.mixamo.com/

		//Instantiate a map object
		let map;
		const subscriptionKey = config.subscriptionKey;
		document.body.onload = function () { GetMap(); };

		function GetMap() {

			//Instantiate a map object
			map = new atlas.Map("myMap", {
				center: [-122.3491, 47.6207, 0],
				subscriptionKey,
				zoom: 19,
				pitch: 60,
				bearing: 0,
				zoom: 16,
				style: "satellite",
				showBuildingModels: false
			});

			map.controls.add([
				new atlas.control.ZoomControl(),
				new atlas.control.CompassControl(),
				new atlas.control.PitchControl(),
				new atlas.control.StyleControl()
			], {
				position: "top-right"
			});

			let intMap = map.map;
			window.tb = new Threebox(
				intMap,
				intMap.getCanvas().getContext('webgl'),
				{
					realSunlight: true,
					//defaultLights: true,
					enableSelectingObjects: true, //change this to false to disable 3D objects selection
					enableDraggingObjects: true, //change this to false to disable 3D objects drag & move once selected
					enableRotatingObjects: true, //change this to false to disable 3D objects rotation once selected
					enableTooltips: true // change this to false to disable default tooltips on fill-extrusion and 3D models
				}
			);
			tb.setSunlight(new Date(2020, 6, 18, 18))
			map.events.add("load", function (e) {
				
				intMap.getContainer().appendChild(stats.dom);
				animate();

				intMap.addLayer({
					id: 'custom_layer',
					type: 'custom',
					renderingMode: '3d',
					onAdd: function (map, mbxContext) {
						// Creative Commons License attribution: Space Needle model by https://sketchfab.com/microsoft
						// https://sketchfab.com/3d-models/space-needle-1d1325bc1ad745dd9eb34fc76e8f6e87
						let options = { obj: './models/landmarks/spaceneedle.glb', type: 'gltf', scale: 3134.71, units: 'meters', rotation: { x: 90, y: 0, z: 0 }, anchor: 'center' }

						tb.loadObj(options, function (model) {
							model.setCoords([-122.349291, 47.620522]);
							model.castShadow = true;
							model.addTooltip("This is the Space Needle!!");
							tb.add(model);
						})

						options = { obj: './models/soldier.glb', type: 'gltf', scale: 100, units: 'meters', rotation: { x: 90, y: 0, z: 0 }, anchor: 'center' }
						tb.loadObj(options, function (model) {
							let soldier = model.setCoords([-122.347732, 47.6207, 0]);
							soldier.castShadow = true;
							soldier.addTooltip("Freaking soldier running!!");
							tb.add(soldier);
							soldier.playAnimation(options = { animation: 1, duration: 10000 });
						})
					},

					render: function (gl, matrix) {
						tb.update();
					}
				});

			});

		}

	</script>
</body>
</html>
